<template>
	<view class="modal-backdrop">
		<view class="modal">
			<view class="close" @click="closeSelf">
				<image src="../../static/groupbuy/gb.png" mode=""></image>
			</view>
			<view class="center">
				<view class="modal-header">
					更多拼团
				</view>
				<view class="join-a-group">
					<view class="ejoins groupe" v-for="(item,index) in group" :key="index">
						<view class="ejoins-left">
							<image :src="item.img" mode=""></image>
							<view class="ejoins-con">
								<view class="username">{{item.username}}</view>
								<view class="text-data">
									<text>剩余{{item.data}}</text>
									<text>还差{{item.num}}人成团</text>
								</view>
							</view>
						</view>
						<text class="my-jointhegroup" @click="iWantToJoinTheGroup(url)">我要参团</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				group: [{
						img: '/static/good/bq.png',
						username: '用户名xx',
						data: '12:32:56',
						num: '1'
					},
					{
						img: '/static/good/bq.png',
						username: '用户名xx',
						data: '12:32:56',
						num: '1'
					},
				
				]
			}
		},
		methods: {
			closeSelf() {
				this.$emit("closeme");
			},
			iWantToJoinTheGroup(){
				uni.navigateTo({
				    url: url
				});
			}
		}

	}
</script>

<style lang="scss">
	.modal-backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99;
		background-color: rgba(0, 0, 0, .3);
		display: flex;
		justify-content: center;
		align-items: center;


		.modal {
			background-color: #fff;
			overflow-x: auto;
			display: flex;
			flex-direction: column;
			border-radius: 16rpx;
			width: 80%;
			height: 60%;


			.close {
				display: flex;
				align-items: center;
				position: absolute;
				right: 7%;
				top: 18%;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.center {

				.modal-header {
					width: 100%;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #E6E6E6;
					text-align: center;
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}

				.join-a-group {
					padding: 0 23rpx;

					.ejoins {
						width: 100%;
						padding: 20rpx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.ejoins-left {
							display: flex;
							align-items: center;

							image {
								width: 56rpx;
								height: 56rpx;
								border-radius: 50%;
							}

							.ejoins-con {
								margin-left: 25rpx;

								.username {
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: rgba(40, 40, 40, 1);
								}

								.text-data {
									display: flex;

									text {
										margin-top: 20rpx;
										font-size: 20rpx;
										font-family: PingFang SC;
										font-weight: 400;
										color: rgba(127, 127, 127, 1);
									}
								}
							}
						}

						.my-jointhegroup {
							display: block;
							font-size: 24rpx;
							width: 144rpx;
							height: 54rpx;
							line-height: 54rpx;
							text-align: center;
							background: linear-gradient(-90deg, rgba(247, 39, 74, 1) 0%, rgba(247, 79, 107, 1) 100%);
							border-radius: 27rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: rgba(255, 255, 255, 1);
						}

					}
				}
			}

		}
	}
</style>
